<template>
  <div class="app-container">
    <vxe-form :data="formData" @submit="onSearchBtnClick" @reset="onSearchBtnClick">
      <vxe-form-item field="name" :item-render="{name: 'input', attrs: {placeholder: '请输入菜单名称'}}" />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            {
              props: {
                type: 'submit',
                content: 'common.select',
                status: 'primary',
              },
            },
            {
              props: { type: 'reset', content: 'common.reset' },
            },
          ],
        }"
      />
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button v-auth="['admin','menu:add']" size="medium" icon="el-icon-circle-plus-outline" status="primary" @click="onAddBtnClick">新增</vxe-button>
        <vxe-button v-auth="['admin','menu:delete']" size="medium" icon="el-icon-delete" status="danger" :disabled="!multipleSelection.length" @click="onDeleteBtnClick">删除</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      resizable
      :tree-config="{transform: true, rowField: 'id', parentField: 'pid'}"
      :data="tableData"
      :loading="loading"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      align="left"
      show-overflow
      show-header-overflow
    >
      <vxe-table-column type="checkbox" width="50" align="center"/>
      <vxe-table-column field="name" title="菜单名称" tree-node width="150"/>
      <vxe-table-column field="type" title="菜单类型" :formatter="formatterType" width="80"/>
      <vxe-table-column v-slot="{ row }" title="图标" width="50">
        <svg-icon :icon-class="row.icon ? row.icon : ''" />
      </vxe-table-column>
      <vxe-table-column field="permission" title="权限" />
      <vxe-table-column v-slot="{ row }" title="是否隐藏">
        <vxe-switch v-model="row.hidden" />
      </vxe-table-column>
      <vxe-table-column field="path" title="路径" />
      <vxe-table-column field="sort" title="排序" width="60"/>
      <vxe-table-column field="createTime" title="创建时间" width="160"/>
      <vxe-table-column title="操作" width="100" align="center" fixed="right">
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <vxe-button v-auth="['admin','menu:update']" size="mini" icon="el-icon-edit" status="primary" @click="onEditBtnClick(row)" />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form
      v-if="detail"
      v-model="detail"
    />
  </div>
</template>
<script>
import {  del, newMenus } from '@/api/menu'
import { getDic } from '@/utils/auth'
import Form from './form'
export default {
  components: {
    Form
  },
  data() {
    return {
      loading: false,
      formData: {
        name: ''
      },
      tableData: [],
      multipleSelection: [],
      detail: null,
      dicType: []
    }
  },
  created() {
    this.dicType = getDic('type')
    const index = this.dicType.findIndex(item => item.value === '')
    this.dicType.splice(index, 1)
    this.onSearchBtnClick()
  },
  methods: {
    formatterType({ cellValue }) {
      const item = this.dicType.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    onSearchBtnClick() {
      this.loading = true
      newMenus(this.formData).then(data => {
        this.tableData = data
        this.loading = false
      })
    },
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteData())
    },
    async deleteData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map(item => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.onSearchBtnClick()
    }
  }
}
</script>
